<template>
  <div>
    <ul class="margin-top3 contentnews">
      <li class="itemnews pointer" :class="item.isRead ? 'hui' : ''" v-for="item in list" :key="item.id"
        @click="readnews(item)">
        <div class="flexleft">
          <span class="yuan" :class="item.isRead ? '' : 'red'"></span>
          <span class="margin-right3">{{ item.title }}</span>
          <span class="margin-right3">{{ item.insertTime }}</span>
        </div>
        <div class="margin-top1">
          <span>{{ item.content }}</span>
          <!-- <a href="https://baidu.com">https://baidu.com</a> -->
        </div>
      </li>
    </ul>
    <div class="flexleft padding15 margin-top2" style="justify-content: flex-end;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNum"
        :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { systemMessageList, querySystemMessageById } from "@/api/news"
import Cookies from 'js-cookie'//获取cookies的信息

export default {
  props: ["newstype"],
  data() {
    return {
      params: {
        time: new Date(),//历史消息时间查询
        pageNum: 1,
        pageSize: 10,
        classify: 1,//1最新消息2历史消息
        genre: "", //1文件消息2审批消息3系统消息
        userId: Cookies.get('admin_id'),//用户id//获取cookies中用户id的信息
      },
      total: 0,
      list: [],
    }
  },
  watch: {
    newstype(newvalu) {
      this.params = {
        time: this.newstype.time,//历史消息时间查询
        pageNum: 1,
        pageSize: 10,
        classify: this.newstype.classify,//1最新消息2历史消息
        genre: this.newstype.genre, //1文件消息2审批消息3系统消息
        userId: Cookies.get('admin_id'),//用户id//获取cookies中用户id的信息
      }
      this.getList()
    }
  },
  mounted() {
    console.log(this.newstype, "leixing");
    this.params = {
      time: this.newstype.time,//历史消息时间查询
      pageNum: 1,
      pageSize: 10,
      classify: this.newstype.classify,//1最新消息2历史消息
      genre: this.newstype.genre, //1文件消息2审批消息3系统消息
      userId: Cookies.get('admin_id'),//用户id//获取cookies中用户id的信息
    }
    this.$bus.$off("readAllfn")
    this.$bus.$on("readAllfn", data => {
      this.getList()
      return false
    })
    this.getList()
  },
  methods: {
    getList() {
      systemMessageList(this.params).then(res => {
        this.list = res.result.systemMessageList
        this.total = res.result.systemMessageCount
      })
    },
    // 读取消息
    readnews(item) {
      if (item.isRead == 1) {
        return false
      }
      querySystemMessageById({ id: item.id }).then(res => {
        if (res.code == 200) {
          item.isRead = 1
        }
      })
    },
    handleSizeChange(val) {
      this.params.pagesize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getList()
    },

  }
}
</script>

<style lang="scss" scoped>
.hui {
  color: #999 !important;
}

.red {
  background-color: red !important;
}

.contentnews {
  height: calc(100vh - 300px);
  overflow-y: scroll;
}

.contentnews::-webkit-scrollbar {
  display: none;
}

a {
  text-decoration: none;
  color: #409eff;
}

.itemnews {
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.yuan {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #999;
}
</style>